<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-[#1E2128] text-white py-8">
    <div class="mx-auto px-6">
      <!-- 步骤进度条 -->
      <div class="mb-12">
        <div class="flex justify-between items-center relative">
          <div class="absolute left-[5%] right-[5%] top-[35%] h-0.5 bg-gray-700 "></div>
          <div class="absolute left-[5%] right-[5%] top-[35%] h-0.5 ">
            <div class="h-full bg-green-500 transition-all duration-300" :style="`width: ${(currentStep / (steps.length - 1)) * 100}%`"></div>
          </div>
          <div v-for="(step, index) in steps" :key="index"
               class="flex flex-col items-center relative z-10">
            <div :class="`w-10 h-10 rounded-full flex items-center justify-center mb-2 border-2 transition-all duration-300
${currentStep > index ? 'bg-green-500 border-green-500' : currentStep === index ? 'bg-[#2468F2] border-[#2468F2]' : 'bg-gray-700 border-gray-700'}`">
              <i v-if="currentStep > index" class="fas fa-check"></i>
              <span v-else>{{ index + 1 }}</span>
            </div>
            <span class="text-sm transition-colors duration-300" :class="currentStep === index ? 'text-white' : 'text-gray-400'">
{{ step }}
</span>
          </div>
        </div>
      </div>
      <!-- 表单内容区 -->
      <div class="bg-gray-800 rounded-lg p-8 mb-8">
        <!-- 第一步：文案采集配置 -->
        <div v-if="currentStep === 0">
          <div class="mb-6">
            <label class="block mb-2">任务名称</label>
            <input v-model="formData.taskName"
                   class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                   :class="{'border-red-500': errors.taskName}"
                   placeholder="请输入任务名称"/>
            <span v-if="errors.taskName" class="text-red-500 text-sm mt-1">{{ errors.taskName }}</span>
          </div>
          <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
              <label class="block mb-2">采集关键词</label>
              <input v-model="formData.keywords"
                     class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                     placeholder="请输入关键词"/>
            </div>
            <div>
              <label class="block mb-2">采集数量</label>
              <input v-model="formData.count" type="number"
                     class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                     placeholder="请输入数量"/>
            </div>
          </div>

        </div>
        <!-- 第二步：AI改写设置 -->
          <div v-if="currentStep === 1">
            <!-- 顶部通栏模型选择 -->
            <div class="mb-6">
              <label class="block mb-2">模型选择</label>
              <div class="relative">
                <button @click="toggleModelDropdown"
                        class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">
                  {{ formData.selectedModel || '请选择AI模型' }}
                  <i class="fas fa-chevron-down"></i>
                </button>
                <div v-if="showModelDropdown"
                     class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">
                  <div v-for="model in aiModels"
                       :key="model"
                       @click="selectModel(model)"
                       class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                    {{ model }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 双列提示词布局 -->
            <div class="grid grid-cols-2 gap-6">
              <!-- 左侧系统提示词 -->
              <div>
                <div class="mb-6">
                  <label class="block mb-2">系统提示词</label>
                  <div class="relative">
                    <textarea v-model="formData.systemPrompt"
                              class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-80"
                              placeholder="请输入系统提示词"></textarea>
                    <div class="absolute right-2 top-2">
                      <span class="text-sm text-gray-400">{{ formData.systemPrompt.length }}/1000</span>
                    </div>
                  </div>
                  <div class="mt-2">
                    <label class="block mb-2">系统变量</label>
                    <div class="flex flex-wrap gap-2">
                      <button v-for="variable in systemVariables"
                              :key="variable"
                              @click="insertSystemVariable(variable)"
                              class="px-3 py-1 bg-blue-900 rounded-lg text-sm whitespace-nowrap">
                        {{ variable }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧用户提示词 -->
              <div>
                <div class="mb-6">
                  <label class="block mb-2">用户提示词</label>
                  <div class="relative">
                    <textarea v-model="formData.userPrompt"
                              class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-80"
                              placeholder="请输入用户提示词"></textarea>
                    <div class="absolute right-2 top-2">
                      <span class="text-sm text-gray-400">{{ formData.userPrompt.length }}/1000</span>
                    </div>
                  </div>
                  <div class="mt-2">
                    <label class="block mb-2">系统变量</label>
                    <div class="flex flex-wrap gap-2">
                      <button v-for="variable in systemVariables"
                              :key="variable"
                              @click="insertUserVariable(variable)"
                              class="px-3 py-1 bg-blue-900 rounded-lg text-sm whitespace-nowrap">
                        {{ variable }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        <!-- 第三步：音频配置 -->
        <div v-if="currentStep === 2">
          <div class="mb-6">
            <label class="block mb-2">平台选择</label>
            <div class="relative">
              <t-select
                  v-model="formData.selectedAudioPlatform"
                  :options="options"
                  placeholder="请选择"
              />





              <button @click="toggleAudioPlatformDropdown"
                      class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">
                {{ formData.selectedAudioPlatform || '请选择平台' }}
                <i class="fas fa-chevron-down"></i>
              </button>
              <div v-if="showAudioPlatformDropdown"
                   class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">
                <div v-for="platform in audioPlatforms"
                     :key="platform.id"
                     @click="selectAudioPlatform(platform.id)"
                     class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                  {{ platform.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="mb-6">
            <label class="block mb-2">声音选择</label>
            <div class="relative">
              <button @click="toggleVoiceDropdown"
                      class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">
                {{ formData.selectedVoice || '请选择声音' }}
                <i class="fas fa-chevron-down"></i>
              </button>
              <div v-if="showVoiceDropdown"
                   class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">
                <div v-for="voice in platformVoices"
                     :key="voice.id"
                     @click="selectVoice(voice.id)"
                     class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                  {{ voice.name }}
                </div>
              </div>
            </div>
          </div>

<!--          <div class="space-y-6">-->
<!--            <div>-->
<!--              <label class="block mb-2">音量调节</label>-->
<!--              <div class="flex items-center gap-4">-->
<!--                <span class="text-sm">0</span>-->
<!--                <input type="range" v-model="formData.volume" min="0" max="100"-->
<!--                       class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"/>-->
<!--                <span class="text-sm">100</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <label class="block mb-2">语速调节</label>-->
<!--              <div class="flex items-center gap-4">-->
<!--                <span class="text-sm">0.5x</span>-->
<!--                <input type="range" v-model="formData.speed" min="50" max="200" step="10"-->
<!--                       class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"/>-->
<!--                <span class="text-sm">2.0x</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->


        </div>
        <!-- 第四步：视频配置 -->
        <div v-if="currentStep === 3">
          <div class="mb-6">
            <label class="block mb-2">平台选择</label>
            <div class="relative">
              <button @click="toggleVideoPlatformDropdown"
                      class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">
                {{ formData.selectedVideoPlatform || '请选择平台' }}
                <i class="fas fa-chevron-down"></i>
              </button>
              <div v-if="showVideoPlatformDropdown"
                   class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">
                <div v-for="platform in videoPlatforms"
                     :key="platform"
                     @click="selectVideoPlatform(platform)"
                     class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                  {{ platform }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <label class="block mb-2">视频模板</label>
            <div class="relative">
              <button @click="toggleVideoDropdown"
                      class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">
                {{ formData.selectedVideo || '请选择视频模板' }}
                <i class="fas fa-chevron-down"></i>
              </button>
              <div v-if="showVideoDropdown"
                   class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">
                <div v-for="video in platformVideos"
                     :key="video"
                     @click="selectVideo(video)"
                     class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                  {{ video }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 第五步：其他配置 -->
        <div v-if="currentStep === 4">
          <div class="mb-6">
            <label class="block mb-2">其他设置</label>
            <textarea v-model="formData.otherConfig"
                      class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-32"
                      placeholder="请输入其他配置"></textarea>
          </div>
        </div>
      </div>
      <!-- 底部操作栏 -->
      <div class="flex justify-between">
        <button @click="cancel"
                class="px-6 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 !rounded-button whitespace-nowrap">
          取消
        </button>
        <div class="flex gap-4">
          <button v-if="currentStep > 0"
                  @click="prevStep"
                  class="px-6 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 !rounded-button whitespace-nowrap">
            上一步
          </button>
          <button @click="nextStep"
                  class="px-6 py-2 bg-[#2468F2] rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap">
            {{ currentStep === steps.length - 1 ? '完成' : '下一步' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script  setup>
import { ref, reactive, defineEmits } from 'vue';
import {get,post} from "@/utils/api";
import config from "@/config";
const currentStep = ref(0);
const showModelDropdown = ref(false);
const showAudioPlatformDropdown = ref(false);
const showVideoPlatformDropdown = ref(false);
const platformVoices = ref([]);
const platformVideos = ref([]);
const aiModels = ['DeepSeek'];
const audioPlatforms = ref([]);
const videoPlatforms = ref([]);
const platformVoicesMap = {
  'minimax': ['minimax女声1', 'minimax女声2', 'minimax男声1'],
};
const platformVideosMap = {
  'HeyGen': ['HeyGen1', 'HeyGen2', 'HeyGen'],
};

const options = [];
for (let i = 0; i < 10000; i++) {
  options.push({ label: `选项${i + 1}`, value: String(i) });
}

const optionsRef = ref(options);

//获取声音平台
const getVoicePlatforms = () => {
  get(config.getConfigList,{cat:3}).then(res=>{
    console.log("getVoicePlatforms", res.data.data)
    audioPlatforms.value=res.data.data
  })
}
getVoicePlatforms()
//获取视频平台
const getVideoPlatforms = () => {
  get(config.getConfigList,{cat:4}).then(res=>{
    videoPlatforms.value=res.data.data
  })
}
getVideoPlatforms()

//获取对应平台声音模板
const getVoices = (platform) => {
  get(config.getConfigList,{type:1,api_config_id:platform}).then(res=>{
    platformVoices.value=res.data.data
  })

}
//获取对应平台声音模板
const getVideos = (platform) => {
  get(config.getConfigList,{type:2,api_config_id:platform}).then(res=>{
    platformVoices.value=res.data.data
  })

}





const steps = ['文案采集配置', 'AI改写设置', '音频配置', '视频配置', '其他配置'];
const formData = reactive({
  taskName: '',
  keywords: '',
  count: 100,
  defaultValue: '',
  systemPrompt: '',
  userPrompt: '',
  selectedModel: '',
  volume: 50,
  speed: 100,
  selectedAudioPlatform: '',
  selectedVoice: '',
  selectedVideoPlatform: '',
  selectedVideo: '',
  otherConfig: ''
});
const errors = reactive({
  taskName: ''
});
const systemVariables = ['{{标题}}', '{{描述}}', '{{字数}}'];
const showVoiceDropdown = ref(false);
const showVideoDropdown = ref(false);
const toggleVoiceDropdown = () => {
  showVoiceDropdown.value = !showVoiceDropdown.value;
  showVideoDropdown.value = false;
};
const toggleVideoDropdown = () => {
  showVideoDropdown.value = !showVideoDropdown.value;
  showVoiceDropdown.value = false;
};
const toggleModelDropdown = () => {
  showModelDropdown.value = !showModelDropdown.value;
};
const selectModel = (model) => {
  formData.selectedModel = model;
  showModelDropdown.value = false;
};
const toggleAudioPlatformDropdown = () => {
  showAudioPlatformDropdown.value = !showAudioPlatformDropdown.value;
};
const toggleVideoPlatformDropdown = () => {
  showVideoPlatformDropdown.value = !showVideoPlatformDropdown.value;
};
const selectAudioPlatform = (platform) => {
  formData.selectedAudioPlatform = platform;
  formData.selectedVoice = '';
  platformVoices.value = platformVoicesMap[platform];
  showAudioPlatformDropdown.value = false;
};
const selectVideoPlatform = (platform) => {
  formData.selectedVideoPlatform = platform;
  formData.selectedVideo = '';
  getVoices(platform)
 // platformVideos.value = platformVideosMap[platform];
  showVideoPlatformDropdown.value = false;
};
const selectVoice = (voice) => {
  formData.selectedVoice = voice;
  showVoiceDropdown.value = false;
};
const selectVideo = (video) => {
  formData.selectedVideo = video;
  showVideoDropdown.value = false;
};
const insertSystemVariable = (variable) => {
  formData.systemPrompt += variable;
};
const insertUserVariable = (variable) => {
  formData.userPrompt += variable;
};
const validateStep = () => {
  errors.taskName = '';
  if (currentStep.value === 0 && !formData.taskName) {
    errors.taskName = '请输入任务名称';
    return false;
  }
  return true;
};
const nextStep = () => {
  if (!validateStep()) return;
  if (currentStep.value < steps.length - 1) {
    currentStep.value++;
  } else {
// 提交表单
    console.log('提交表单', formData);
  }
};
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};
const emit = defineEmits(['close']);
const cancel = () => {
// 取消操作
  console.log('取消')

 // 关闭弹窗
  emit('close');

};
</script>
<style scoped>
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #2468F2;
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #2468F2;
  border-radius: 50%;
  cursor: pointer;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
